<template>
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-row >
                        <el-col :span="17">
                            <el-input v-show="inputShow" v-model="channelInput" :placeholder="inputText"></el-input>
                            <span v-show="stetusShow">
                                <template>
                                <el-radio v-model="channelDto.channelStatus" :label="1">已启用</el-radio>
                                <el-radio v-model="channelDto.channelStatus" :label="0">已删除</el-radio>
                                </template>
                            </span>
                        </el-col>
                        <el-col :span="7">
                            <el-select v-model="channelInputTerm"  placeholder="请选择活查询内容">
                                <el-option label="渠道名" value="channelName"></el-option>
                                <el-option label="手机号" value="channelPhone"></el-option>
                                <el-option label="状态" value="channelStatus"></el-option>
                                <el-option label="编码" value="channelNum"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3">
                    <el-button @click="selectChannelInput" round>查询</el-button>
                </el-col>
                <el-col :span="6">
                    <el-button @click="addChannelDetailsShow=true" type="success" plain>添加渠道商</el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="21">
                    <el-table :data="channel" border style="width: 100%">
                        <el-table-column  type="index" label="序号" width="50">
                        </el-table-column>
                        <el-table-column prop="channelName" label="渠道名" width="120">
                        </el-table-column>
                        <el-table-column prop="channelPhone" label="手机" width="120">
                        </el-table-column>
                        <el-table-column label="状态" width="120">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px"><el-link :underline="false" @click="updateChannelStatus(scope.row)">{{scope.row.channelStatus==1?"已启用":"已删除"}}</el-link></span>
                            </template>
                        </el-table-column>
                        </el-table-column>
                        <el-table-column prop="channelRecharge" label="累计充值" width="120">
                        </el-table-column>
                        <el-table-column prop="channelBuy" label="累计消费" width="120">
                        </el-table-column>
                        <el-table-column prop="channelMembers" label="会员数量" width="120">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button @click="channelClickShow(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="deleteClickShow(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChange" @current-change="pageChange" :page-sizes="[3, 5, 10, 20]" :page-size="page.pageSize" :total="page.tatle">
                    </el-pagination>
                    <!-- 渠道商详情展示 -->
                    <el-dialog title="" :visible.sync="channelDetailsShow">
                        <el-descriptions title="渠道商详情" direction="vertical" :column="4" border>
                        <el-descriptions-item label="名称">{{channelDetails.channelName}}</el-descriptions-item>
                        <el-descriptions-item label="电话">{{channelDetails.channelPhone}}</el-descriptions-item>
                        <el-descriptions-item label="渠道商编码">{{channelDetails.channelNum}}</el-descriptions-item>
                        <el-descriptions-item label="渠道商证件号码">{{channelDetails.channelPapers}}</el-descriptions-item>
                        <el-descriptions-item label="充值累计">{{channelDetails.channelRecharge}}</el-descriptions-item>
                        <el-descriptions-item label="累计消费">{{channelDetails.channelBuy}}</el-descriptions-item>
                        <el-descriptions-item label="会员数">{{channelDetails.channelMembers}}</el-descriptions-item>
                        <el-descriptions-item label="开户行">{{channelDetails.channelBank}}</el-descriptions-item>
                        <el-descriptions-item label="开户行账号">{{channelDetails.channelAccount}}</el-descriptions-item>
                        <el-descriptions-item label="状态">
                            <el-tag size="small">{{channelDetails.channelStatus==1?"已启用":"已删除"}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                        </el-descriptions>
                    </el-dialog>
                    <!-- 渠道商修改信息页面 -->
                    <el-dialog title="渠道商详情" :visible.sync="channelDetailsUpdate">
                        <el-form ref="form" :model="channelDetails" label-width="120px">
                            <el-row>
                            <el-col :span="12" :offset="6">
                            <el-form-item label="渠道商名称">
                                <el-input v-model="channelDetails.channelName" :placeholder="channelDetails.channelName"></el-input>
                            </el-form-item>
                            <el-form-item label="渠道商电话">
                            <el-input v-model="channelDetails.channelPhone" :placeholder="channelDetails.channelPhone"></el-input>
                            </el-form-item>
                            <el-form-item label="渠道商编码">
                            <el-input v-model="channelDetails.channelNum" :placeholder="channelDetails.channelNum" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="渠道商证件号码">
                            <el-input v-model="channelDetails.channelPapers" :placeholder="channelDetails.channelPapers" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="充值累计">
                            <el-input v-model="channelDetails.channelRecharge" :placeholder="channelDetails.channelRecharge" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="累计消费">
                            <el-input v-model="channelDetails.channelBuy" :placeholder="channelDetails.channelBuy" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="会员数">
                            <el-input v-model="channelDetails.channelMembers" :placeholder="channelDetails.channelMembers"></el-input>
                            </el-form-item>
                            <el-form-item label="开户行">
                            <el-input v-model="channelDetails.channelBank" :placeholder="channelDetails.channelBank"></el-input>
                            </el-form-item>
                            <el-form-item label="开户行账号">
                            <el-input v-model="channelDetails.channelAccount" :placeholder="channelDetails.channelAccount"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-radio v-model="channelDetails.channelStatus" :label="1">已启用</el-radio>
                                <el-radio v-model="channelDetails.channelStatus" :label="0">已删除</el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="updateChannelDetails(1)">确定</el-button>
                                <el-button @click="updateChannelDetails(0)">取消</el-button>
                            </el-form-item>
                            </el-col>
                            </el-row>
                            </el-form>
                    </el-dialog>
                    <!-- 添加渠道商信息页面 -->
                    <el-dialog title="添加渠道商" :visible.sync="addChannelDetailsShow">
                        <el-form ref="form" :model="channelDetails" label-width="120px">
                            <el-row>
                            <el-col :span="12" :offset="6">
                            <el-form-item label="渠道商名称">
                                <el-input v-model="channelDetails.channelName" placeholder="请输入：渠道商名称"></el-input>
                            </el-form-item>
                            <el-form-item label="渠道商电话">
                            <el-input v-model="channelDetails.channelPhone" placeholder="请输入：渠道商电话"></el-input>
                            </el-form-item>
                            <el-form-item label="渠道商编码">
                            <el-input v-model="channelDetails.channelNum" placeholder="请输入：渠道商编码"></el-input>
                            </el-form-item>
                            <el-form-item label="渠道商证件号码">
                            <el-input v-model="channelDetails.channelPapers" placeholder="请输入：渠道商证件号码"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="充值累计">
                            <el-input v-model="channelDetails.channelRecharge" placeholder="充值累计"></el-input>
                            </el-form-item>
                            <el-form-item label="累计消费">
                            <el-input v-model="channelDetails.channelBuy" placeholder="累计消费"></el-input>
                            </el-form-item> -->
                            <el-form-item label="会员数">
                            <el-input v-model="channelDetails.channelMembers" placeholder="请输入：会员数"></el-input>
                            </el-form-item>
                            <el-form-item label="开户行">
                            <el-input v-model="channelDetails.channelBank" placeholder="请输入：开户行"></el-input>
                            </el-form-item>
                            <el-form-item label="开户行账号">
                            <el-input v-model="channelDetails.channelAccount" placeholder="请输入：开户行账号"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-radio v-model="channelDetails.channelStatus" :label="1">已启用</el-radio>
                                <el-radio v-model="channelDetails.channelStatus" :label="0">已删除</el-radio>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addChannelDetails(1)">确定</el-button>
                                <el-button @click="addChannelDetails(0)">取消</el-button>
                            </el-form-item>
                            </el-col>
                            </el-row>
                            </el-form>
                    </el-dialog>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>
<script>
export default {
    name:"ChannelShow",
    data(){
        return{
            channelInput:"",
            channelInputTerm:"channelName",
            channel:[],
            page:{
                pageIndex:1,
                pageSize:5,
                tatle:0,
            },
            channelDto:{
                channelName:null,
                channelPhone:null,
                channelMembers:null,
                channelNum:null,
                channelPapers:null,
                channelBank:null,
                channelAccount:null,
                channelStatus:null,
                channelStatusDelect:null,
            },
            inputShow:true,
            stetusShow:false,
            channelDetailsShow : false,
            channelDetailsUpdate : false,
            addChannelDetailsShow:false,
            channelDetails:{
                channelAccount:null,
                channelBank:null,
                channelBuy:null,
                channelId:null,
                channelMembers:null,
                channelName:null,
                channelNum:null,
                channelPapers:null,
                channelPhone:null,
                channelRecharge:null,
                channelStatus:null,
                channelStatusDelect:null,
                rawAddTime:null,
                rawUpdateTime:null,
            },
        }
    },
    methods:{
        //查询渠道商详情列表
        getChannel(){
            let channelGetDto={
                    pageDto:this.page,
                    channelDto:this.channelDto,
            }
            this.$http.post("channel/findAllChannel",channelGetDto)
                    .then(resp => {
                        console.log(resp);
                        let data = resp.data;
                        if (data.state) {
                            let data1 = data.data;
                            this.page.pageIndex = data1.current;
                            this.page.pageSize = data1.size;
                            this.page.tatle = data1.total;
                            this.channel=data1.records;
                            console.log(this.channel);
                        } else {
                            alert(data.massage);
                        }

                    })
                    .catch(error => {
                        console.log(error);
                    })
        },
        //渠道商状态修改
        updateChannelStatus(row){
            let cheanl = row;
            let channelStatus = row.channelStatus==1?0:1;
            cheanl.channelStatus = channelStatus;
            this.channelDto = cheanl;
            this.enableChannel();//修改渠道商信息
        },
        //修改渠道商信息
        enableChannel(){
            let channelGetDto={
                    pageDto:this.page,
                    channelDto:this.channelDto,
            }
            let channelId = this.channelDto.channelId;
            this.$http.post("channel/updateChannel",channelGetDto)
                    .then(resp => {
                        console.log(resp);
                        let data = resp.data;
                        if (data.state) {
                            let data1 = data.data;
                            this.channelDetailsUpdate=false;
                            let channels = this.channel;
                            for (let i = 0,length = channels.length; i < length; i++) {
                                let channel = channels[i];
                                if(channel.channelId == channelId){
                                    if(data1.channelStatusDelect == 0){
                                        channels.splice(i,1);//删除渠道商条件
                                    }else{
                                        channels.splice(i,1,data1);//修改渠道商条件
                                    }
                                    break;
                                }
                            }
                        } else {
                            alert(data.massage);
                        }

                    })
                    .catch(error => {
                        console.log(error);
                    })
        },
        //打开查看渠道商详情页面
        handleClick(row){
                this.channelDetailsShow = true;
                this.channelDetails = row;
        },
        //打开修改渠道商详情页面
        channelClickShow(row){
                const ObjA = Object.assign(this.channelDetails, row);
                this.channelDetailsUpdate=true;
        },
        //删除当前渠道商
        deleteClickShow(row){
            let cheanl = row;
            cheanl.channelStatusDelect = 0;
            this.channelDto = cheanl;
            this.enableChannel();//修改渠道商信息

        },
        //提交修改渠道商详情功能并关闭
        updateChannelDetails(i){
                if(i==1){
                    this.channelDto = this.channelDetails;
                    console.log(this.channelDto);
                    this.enableChannel();//修改渠道商信息
                }else{
                    this.channelDetailsUpdate=false;
                }
                this.emptyInputMethod();//清空输入框功能
        },
        //添加渠道商信息
        addChannelDetails(i){
            if(i==1){
                    this.channelDto = this.channelDetails;
                    console.log(this.channelDto);
                    this.addChannelMethod();//添加渠道商信息功能
                }else{
                    this.addChannelDetailsShow=false;
                }
                this.emptyInputMethod();//清空输入框功能
        },
        //添加渠道商信息功能
        addChannelMethod(){
            let channelGetDto={
                    pageDto:this.page,
                    channelDto:this.channelDto,
            }
            this.$http.post("channel/addChannel",channelGetDto)
                    .then(resp => {
                        console.log(resp);
                        let data = resp.data;
                        if (data.state) {
                            let data1 = data.data;
                            this.addChannelDetailsShow=false;
                            let channels = this.channel;
                            channels.splice(0,0,data1);
                        } ;
                        alert(data.massage);

                    })
                    .catch(error => {
                        console.log(error);
                    })
        },
        //输入框查询功能
        selectChannelInput(){
            switch(this.channelInputTerm){
                case 'channelName':
                    this.channelDto.channelName=this.channelInput;
                    break;
                case 'channelPhone':
                    this.channelDto.channelPhone=this.channelInput;
                    break;
                case 'channelNum':
                    this.channelDto.channelNum=this.channelInput;
                    break;
            }
            this.getChannel();
            this.emptyInputMethod();
        },
        //分页区
        pageSizeChange(ps) {
            this.page.pageSize = ps;
            this.getChannel();
        },
        pageChange(p) {
            this.page.pageIndex = p;
            this.getChannel();
        },

        //清空输入框功能
        emptyInputMethod(){
            let channelDetails={
                channelAccount:null,
                channelBank:null,
                channelBuy:null,
                channelId:null,
                channelMembers:null,
                channelName:null,
                channelNum:null,
                channelPapers:null,
                channelPhone:null,
                channelRecharge:null,
                channelStatus:null,
                channelStatusDelect:1,
                rawAddTime:null,
                rawUpdateTime:null,
            };
            this.channelDetails = channelDetails;
            this.channelDto = channelDetails;
        }
    },
    computed:{
        inputText(){
            this.channelInput='';
            this.inputShow=true;
            this.stetusShow=false;
            switch(this.channelInputTerm){
                case 'channelName':
                    return '请输入渠道名';
                case 'channelPhone':
                    return '请输入手机号';
                case 'channelStatus':
                    this.inputShow=false;
                    this.stetusShow=true;
                    return '请选择状态';
                case 'channelNum':
                    return '请输入编码';
            }
        }
    },
    //初始加载
    created(){
            this.channelDto.channelStatusDelect=1;
            this.getChannel();
    },
}
</script>